<!-- 我的 -->
<template>
  <view class="wrap-me">
    <!-- 当前账号信息区域 -->
    <view class="user-info-box primary-bg-color" style="background: url('/static/image/my_bg.png') no-repeat">
      <!-- 已经登录 -->
      <view class="top-box">
        <view class="avatar-box">
          <u-avatar :src="userInfo.avatar" size="60"></u-avatar>
          <view>
            <text class="nickName-txt">哈辉哈</text>
            <view class="nickName-txt"
              ><view class="level"><image src="/static/image/img15.png" class="lv-bg"></image>LV2</view>uid：123456789<image src="/static/image/img14.png" class="copy-bg"></image></view>
          </view>
        </view>
      </view>
    <view class="banner-img-box">
      <view class="banner-bg">
        <view class="banner-top">
          <view class="total-money">
            <view>可提现余额(元)</view>
            <view style="font-weight: 600">128.00</view>
          </view>
          <view class="withdraw-btn">提现</view>
        </view>
        <view class="coupon-bg">
          <view class="coupon-item first-item">
            <view class="coupon-1">58.00</view>
            <view class="coupon-txt">待结算收益(元)</view>
          </view>
          <view class="coupon-item second-item">
            <view class="coupon-1">58.00</view>
            <view class="coupon-txt">累计佣金收益(元)</view>
          </view>
          <view class="coupon-item three-item">
            <view class="coupon-1">58.00</view>
            <view class="coupon-txt">累计平台补贴(元)</view>
          </view>
        </view>
      </view>
    </view>
    </view>
    <view class="order-panel">
      <view class="panel-left">
        <view>
          <view class="my-order"> 我的订单 </view>
          <view class="all-txt">查看全部</view>
        </view>
        <view class="order-bg">
          <image src="/static/image/myorder2_bg.png"></image>
        </view>
      </view>
      <view class="panel-right">
        <view>
          <view class="my-order"> 推客订单 </view>
          <view class="all-txt">查看支付</view>
        </view>
        <view class="order-bg">
          <image src="/static/image/myorder_bg.png"></image>
        </view>
      </view>
    </view>
    <view class="common-tools">
      <view class="tools-title">常用工具</view>
      <view class="tools-list">
        <view class="tools-item">
          <view class="icon-box">
            <image src="/static/image/img1.png"></image>
          </view>
          <view class="txt">数据中心</view>
        </view>
        <view class="tools-item">
          <view class="icon-box">
            <image src="/static/image/img2.png"></image>
          </view>
          <view class="txt">推客授权</view>
        </view>
        <view class="tools-item" @click="handleOrder">
          <view class="icon-box">
            <image src="/static/image/img3.png"></image>
          </view>
          <view class="txt">订单助手</view>
        </view>
        <view class="tools-item" @click="handleFriendList">
          <view class="icon-box">
            <image src="/static/image/img4.png"></image>
          </view>
          <view class="txt">好友列表</view>
        </view>
      </view>
      <view class="tools-list">
        <view class="tools-item" @click="handleSelectShop">
          <view class="icon-box">
            <image src="/static/image/img5.png"></image>
          </view>
          <view class="txt">选品广场</view>
        </view>
        <view class="tools-item">
          <view class="icon-box">
            <image src="/static/image/img6.png"></image>
          </view>
          <view class="txt">我的橱窗</view>
        </view>
        <view class="tools-item">
          <view class="icon-box">
            <image src="/static/image/img7.png"></image>
          </view>
          <view class="txt">结算中心</view>
        </view>
        <view class="tools-item">
          <view class="icon-box"> </view>
          <view class="txt"></view>
        </view>
      </view>
    </view>
    <view class="bottom-list">
      <view class="bottom-item">
        <view class="item-left">
          <image src="/static/image/img8.png" class="bottom-img"></image>
          <text class="item-txt">收货地址</text>
        </view>
        <view class="item-right">
          <image src="/static/image/img13.png" class="arrow-img"></image>
        </view>
      </view>
      <view class="bottom-item">
        <view class="item-left">
          <image src="/static/image/img9.png" class="bottom-img"></image>
          <text class="item-txt">信息设置</text>
        </view>
        <view class="item-right">
          <image src="/static/image/img13.png" class="arrow-img"></image>
        </view>
      </view>
      <view class="bottom-item">
        <view class="item-left">
          <image src="/static/image/img10.png" class="bottom-img"></image>
          <text class="item-txt">联系客服</text>
        </view>
        <view class="item-right">
          <image src="/static/image/img13.png" class="arrow-img"></image>
        </view>
      </view>
      <view class="bottom-item">
        <view class="item-left">
          <image src="/static/image/img11.png" class="bottom-img"></image>
          <text class="item-txt">用户隐私协议</text>
        </view>
        <view class="item-right">
          <image src="/static/image/img13.png" class="arrow-img"></image>
        </view>
      </view>
      <view class="bottom-item">
        <view class="item-left">
          <image src="/static/image/img12.png" class="bottom-img"></image>
          <text class="item-txt">用户注册协议</text>
        </view>
        <view class="item-right">
          <image src="/static/image/img13.png" class="arrow-img"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const ENV_CONFIG = uni.envConfig;
// 接口的基础路径
const apiContextPath = ENV_CONFIG.baseUrl + "/supervisor";
export const apiContextPathSsbd = ENV_CONFIG.baseUrlSsbd;
import { mapState, mapActions } from "vuex";
export default {
  components: {},
  data() {
    return {
      formData: {
        avatar: "",
        nickname: "",
        id: "",
        openid: "",
        unionid: "",
        videoID: "",
      },
      qrcodeUrl: uni.envConfig.qrcodeUrl,
      isShow: false,
      isShowPop: false,
      show: false,
      inputTxt: "",
      fileList1: [],
      imgUrl: "",
    };
  },
  computed: {
    ...mapState("user", {
      userInfo: "userInfo",
    }),
  },
  mounted() {
    console.log("我的 coming");
    console.log(this.userInfo);
    this.formData.avatar = this.userInfo.avatar;
    // this.getUserInfo();
  },
  onShow() {
    console.log("onshow");
  },
  onLoad() {
    console.log(123);
  },
  methods: {
    handleSelectShop() {

    this.$utils.toPage("/pages/me/selectShop");

    },
    handleFriendList() {

    this.$utils.toPage("/pages/me/friendList");

    },
    handleOrder() {

    this.$utils.toPage("/pages/me/order");

    }
  }
};
</script>

<style scoped lang="scss">
.authorize-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #fff;
  margin-left: 20rpx;
}

.user-info-box {
  // background: url("/static/image/my_bg.png");
  width: 750rpx;
  height: 384rpx;
  background-size: 750rpx 384rpx;
}

.common-tools {
  margin: 20rpx;
  background: #fff;
  border-radius: 10rpx;
}

.tools-title {
  font-weight: 700;
  font-size: 32rpx;
  text-indent: 27rpx;
  line-height: 60rpx;
  padding-top: 30rpx;
}

.tools-list {
  height: 160rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tools-item {
  flex: 1;
  text-align: center;
}

.icon-box {
  flex-direction: column-reverse;
}

.icon-box image {
  width: 80rpx;
  height: 80rpx;
}


.bottom-list {
  background: #fff;
  margin: 20rpx;
  border-radius: 10rpx;
  padding: 20rpx 0;
}

.bottom-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.bottom-img {
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
}

.arrow-img {
  width: 36rpx;
  height: 36rpx;
}

.item-txt {
  font-size: 30rpx;
  color: #363332;
  font-weight: 600;
}

.bottom-item {
  padding: 20rpx;
}
::v-deep .u-icon--right {
  flex-direction: column-reverse !important;
}

.txt {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #333;
}

.banner-img-box {
  margin: 20rpx;
}

.banner-bg {
  width: 100%;
  height: 300rpx;
  border-radius: 20rpx;
  background: #e72323;
  border-radius: 16rpx;
}

.coupon-bg {
  margin: 20rpx 20rpx 0;
  height: 144rpx;
  background: #fff;
  border-radius: 10rpx;
  display: flex;
}
.coupon-item {
  flex: 1;
}

.first-item {
  height: 70rpx;
  border-right: 2rpx solid #ccc;
  margin: auto;
  text-align: center;
  font-size: 28rpx;
}

.coupon-1 {
  color: #333;
  font-weight: 600;
}

.coupon-txt {
  color: #333;
  font-size: 24rpx;
}

.second-item {
  height: 70rpx;
  border-right: 2rpx solid #ccc;
  margin: auto;
  text-align: center;
  font-size: 28rpx;
}

.three-item {
  height: 70rpx;
  margin: auto;
  text-align: center;
  font-size: 28rpx;
}

.banner-top {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
}

.total-money {
  color: #fff;
}

.withdraw-btn {
  width: 159rpx;
  height: 64rpx;
  background: #fff3f4;
  border-radius: 40rpx;
  text-align: center;
  line-height: 64rpx;
  color: #e72323;
}

.order-panel {
  margin-top: 110rpx;
  display: flex;
  justify-content: space-around;
}

.panel-left,
.panel-right {
  width: 348rpx;
  height: 174rpx;
  background: #fff;
  border-radius: 20rpx;
  display: flex;
  justify-content: space-around;
}

.order-bg image {
  width: 160rpx;
  height: 160rpx;
}

.my-order {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin: 34rpx 0 23rpx 27rpx;
}

.all-txt {
  font-size: 24rpx;
  color: #999;
  margin-left: 27rpx;
}

.top-box {
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.avatar-box {
  display: flex;
  align-items: center;
}

.nickName-txt {
  color: #fff;
  margin-left: 20rpx;
  font-size: 26rpx;
}

.level {
  width: 90rpx;
  height: 36rpx;
  // background: #FF5050;
  border-radius: 10rpx;
  background: linear-gradient(135deg, #f50d19 0%, #ff6b6b 100%);
}

.drawer-content {
  padding: 0px;
}

.line {
  width: 100%;
  border-bottom: 1rpx solid #eee;
}

.tel-server {
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: 32rpx;
}

.bg-black {
  width: 100%;
  height: 10rpx;
  background: #eee;
}

.btn {
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: 32rpx;
}

.server-pop {
  position: fixed;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.server-content {
  width: 600rpx;
  height: 300rpx;
  background-color: #fff;
  margin: auto;
  border-radius: 30rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #eee;
}

.lv-bg,.copy-bg {
  width: 24rpx;
  height: 24rpx;
  margin-right: 10rpx;
}

.copy-bg {
  margin-left: 10rpx;
}
.tel-num {
  text-align: center;
  margin: 60rpx auto;
  font-size: 36rpx;
}

.btn-box {
  margin: 0 30rpx;
  display: flex;
}

.btn-box view {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  font-size: 26rpx;
  border-radius: 10rpx;
}

.cancle-btn {
  flex: 1;
  background: #eee;
  margin-right: 20rpx;
}

.sure-btn {
  flex: 1;
  background: #07c160;
  color: #fff;
  margin-left: 20rpx;
}

.popup-container {
  padding: 0rpx 30rpx 100rpx;
}

.title {
  text-align: center;
  font-size: 28rpx;
  margin: 30rpx 0;
}

.main-txt {
  font-size: 28rpx;
}

.sub-txt {
  font-size: 26rpx;
  margin-bottom: 30rpx;
}

.btn-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-box view {
  width: 200rpx;
  height: 68rpx;
  background: #ddd;
  text-align: center;
  line-height: 68rpx;
  margin-left: 20rpx;
  color: #fff;
  font-size: 28rpx;
  border-radius: 10rpx;
}

.btn-box .sure-btn {
  background: #f4030f;
}

.input-box {
  border-bottom: 1rpx solid #eee;
  margin-bottom: 20rpx;
}

::v-deep .u-input {
  background-color: none;
}

.upload-box {
  margin: 0 auto;
}

.line {
  border-bottom: 1rpx dashed #eee;
}
</style>
